<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
  <title>我的学习</title>
  <style>
		html, body {width: 100%;min-height: 100%;background: #f0f0f0;}
    .h20 {height: 0.5rem;background: #f0f0f0;}


		.zxzx .aui-list-item-title {
			color: #333;
			line-height: 1.2rem;
			font-size: 0.8rem;
		}
		.zxzx .aui-info-item {
				color: #999;
				font-size: 0.7rem;
		}
		.zxzx .aui-list-item-media {
			width: 6.5rem;
		}
		.zxzx .aui-list-item.last-item .aui-list-item-title {
			color: #666;
			font-size: 0.7rem
		}
		.zxzx .last-item_video {
			position: relative;
			padding: 0;
		}
		.zxzx .last-item_video .mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: rgba(0, 0, 0, 0.1);
		}
		.zxzx .last-item_video .mask_mid {
			width: 4rem;
			height: 4rem;
			padding: 1rem;
			position: absolute;
			left:0;
			right:0;
			top: 0;
			bottom: 0;
			margin: auto;
			border-radius: 50%;
			background: rgba(0,0,0,0.3);
			text-align: center;
		}
		.zxzx .last-item_video .mask_mid img {
			height: 100%;
			width: auto;
			margin-left: auto;
			margin-right: 0;
		}
		.zxzx .last-item_video .mask_bot {
			color: #fff;
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 1rem;
		}
		.zxzx .last-item_video .mask_left {
			float: left;
			color: #fff;
			font-size: 0.7rem;
		}
		.zxzx .last-item_video .mask_left img {
			width: 0.7rem;
			display: inline-block;
			vertical-align: middle;
			margin-top: -0.25rem;
			margin-right: 0.25rem;
		}
		.zxzx .last-item_video .mask_right {
			float: right;
			color: #fff;
			font-size: 0.7rem;
		}
    .zxzx .aui-list {
      background-color: transparent;
    }
    .zxzx .aui-list .aui-list-item {
        background-size: 0;
        background-color: #fff;
        margin-bottom: 1rem;
    }

  </style>
</head>
<body>
<section class="aui-refresh-content">

  <div class="aui-content zxzx">
    <ul class="aui-list aui-media-list">
       <li class="aui-list-item last-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">多张图片列表一</div>
                <div class="aui-row aui-row-padded">
                    <div class="aui-col-xs-12 last-item_video">
                       <img src="../../image/firstpage/t4@3x.png">
                       <div class="mask">
                          <div class="mask_mid">
                             <img src="../../image/bf1@3x.png">
                          </div>
                          <div class="mask_bot">
                            <div class="mask_left">
                              <img src="../../image/bf2@3x.png">29.9万播放
                            </div>
                            <div class="mask_right">
                              02:33
                            </div>
                          </div>
                       </div>
                    </div>
                   <div class="aui-info aui-margin-t-5" style="padding:0">
                       <div class="aui-info-item">2015-07-14 10:31</div>
                   </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item last-item">
             <div class="aui-list-item-inner">
                 <div class="aui-list-item-title">多张图片列表一</div>
                 <div class="aui-row aui-row-padded">
                     <div class="aui-col-xs-12 last-item_video">
                        <img src="../../image/firstpage/t4@3x.png">
                        <div class="mask">
                           <div class="mask_mid">
                              <img src="../../image/bf1@3x.png">
                           </div>
                           <div class="mask_bot">
                             <div class="mask_left">
                               <img src="../../image/bf2@3x.png">29.9万播放
                             </div>
                             <div class="mask_right">
                               02:33
                             </div>
                           </div>
                        </div>
                     </div>
                    <div class="aui-info aui-margin-t-5" style="padding:0">
                        <div class="aui-info-item">2015-07-14 10:31</div>
                    </div>
                 </div>
             </div>
         </li>
         <li class="aui-list-item last-item">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-title">多张图片列表一</div>
                  <div class="aui-row aui-row-padded">
                      <div class="aui-col-xs-12 last-item_video">
                         <img src="../../image/firstpage/t4@3x.png">
                         <div class="mask">
                            <div class="mask_mid">
                               <img src="../../image/bf1@3x.png">
                            </div>
                            <div class="mask_bot">
                              <div class="mask_left">
                                <img src="../../image/bf2@3x.png">29.9万播放
                              </div>
                              <div class="mask_right">
                                02:33
                              </div>
                            </div>
                         </div>
                      </div>
                     <div class="aui-info aui-margin-t-5" style="padding:0">
                         <div class="aui-info-item">2015-07-14 10:31</div>
                     </div>
                  </div>
              </div>
          </li>
   </ul>
</section>
  </div>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script src="../../script/aui-pull-refresh.js"></script>
</body>
<script type="text/javascript">
    var $_this = this;
    var pullRefresh = new auiPullToRefresh({
        container: document.querySelector('.aui-refresh-content'),
        triggerDistance: 100
    },function(ret){
        if(ret.status=="success"){
            setTimeout(function(){pullRefresh.cancelLoading();},500)
        }
    })
</script>
</html>
